<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品详情</title>
		<link rel="stylesheet" href="http://www.xyshopping.com:8848/qianduan/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://www.xyshopping.com:8848/qianduan/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/jquery-heima-0.0.1.js"></script>
		<script type="text/javascript" src="http://www.xyshopping.com:8848/qianduan/resources/js/heima-include.js"></script>
		<script>
			$(function(){
				//使用封装好的方法获取pid
				var pid = HM.getParameter("pid");
				HM.ajax("/product?md=info","pid="+pid,function(vo){
					//获取分类信息
					var category = vo.data.category;
					//处理 + 拼接
					var a ="<a href='http://www.xyshopping.com:8848/qianduan/view/product/list.html?cid="+category.cid+"'>"+category.cname+"</a>"
					$("#navbar").append(a);
					
					//获取商品信息
					var product = vo.data.product;
					//修改图片路径
					$("#pimage").attr("src","http://www.xyshopping.com:8848/qianduan/"+product.pimage);
					//修改商品编号
					$("#pid").html(product.pid);
					//修改商品名字
					$("#pname").html(product.pname);
					//修改商品的一口价
					$("#shop_price").html(product.shop_price);
					//修改商品的参考价
					$("#market_price").html(product.market_price);
					//修改商品的描述信息
					$("#pdesc").html(product.pdesc);
				});
				
				//添加购物车逻辑
				//绑定点击事件
				$("#itemBtn").click(function(){
					//提交pid、count
					var pid = HM.getParameter("pid");
					var count = $("#count").val();
					
					var params = "pid="+pid+"&count="+count;
					//发送给服务器
					HM.ajax("/cart?md=add", params, function(vo){
						if(vo.code == 1){
							//成功，跳转购物车列表页面
							location.href="../cart/list.html";
						}else{
							//失败，提示信息
							alert(vo.data);
						}
					})
					
				})
				
				
				
				
				
				
				
			})
		</script>
		<style>
			a:hover{
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid">
			<div id="header" style="min-height: 130px;"></div>
			<div class="container">
				<div class="row">
					<div id="navbar" style="border: 1px solid #e4e4e4;width:930px;margin-bottom:10px;margin:0 auto;padding:10px;margin-bottom:10px;">
						<a href="http://www.xyshopping.com:8848/qianduan/index.html">首页&nbsp;&nbsp;&gt;</a>

					</div>

					<div style="margin:0 auto;width:950px;">
						<div class="col-md-6">
							<img id="pimage" style="opacity: 1;width:400px;height:350px;" title="" class="medium" src="http://www.xyshopping.com:8848/qianduan/resources/img/loading.gif">
						</div>

						<div class="col-md-6">
							<div id="pname"><strong>大冬瓜</strong></div>
							<div style="border-bottom: 1px dotted #dddddd;width:350px;margin:10px 0 10px 0;">
								<div>编号：<span id="pid"></span></div>
							</div>

							<div style="margin:10px 0 10px 0;">
								一口价: <strong style="color:#ef0101;">&yen;<span id="shop_price"></span>元/份</strong> 参 考 价: <del>￥<span id="market_price"></span>元/份</del>
							</div>

							<div style="margin:10px 0 10px 0;">促销: <a target="_blank" title="限时抢购 (2018-07-30 ~ 2018-09-01)" style="background-color: #f07373;">限时抢购</a>
							</div>

							<div style="padding:10px;border:1px solid #e7dbb1;width:330px;margin:15px 0 10px 0;;background-color: #fffee6;">
								<div style="border-bottom: 1px solid #faeac7;margin-top:20px;padding-left: 10px;">购买数量:
									<input id="count" name="count" value="1" maxlength="4" size="10" type="text"> </div>

								<div style="margin:20px 0px 10px 0px;padding-left: 70px;">
									<a href="javascript:;" id="itemBtn">
										<input style="background: url('http://www.xyshopping.com:8848/qianduan/resources/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;"
										 value="加入购物车" type="button">
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="clearfix"></div>
					<div style="width:950px;margin:0 auto;">

						<div style="background-color:#d3d3d3;width:930px;padding:10px 10px;margin:10px 0 10px 0;">
							<strong>商品参数</strong>
						</div>
						<div style="margin-top:10px;width:900px;" id="pdesc">
							三防智能手机 移动/联通双4G 安全 黑黄色 双4G美国军工IP69 30天长待机 3米防水防摔 北斗
						</div>

						<div style="background-color:#d3d3d3;width:900px;">
							<table class="table table-bordered">
								<tbody>
									<tr class="active">
										<th><strong>商品评论</strong></th>
									</tr>
									<tr class="warning">
										<th>暂无商品评论信息 <a>[发表商品评论]</a></th>
									</tr>
								</tbody>
							</table>
						</div>

						<div style="background-color:#d3d3d3;width:900px;">
							<table class="table table-bordered">
								<tbody>
									<tr class="active">
										<th><strong>商品咨询</strong></th>
									</tr>
									<tr class="warning">
										<th>暂无商品咨询信息 <a>[发表商品咨询]</a></th>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

				</div>
			</div>
			<div id="footer" style="min-height: 203px;"></div>
		</div>
	</body>
</html>
